/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */


(function($){
    
     $.fn.memory = function(options){
         // build main options before element iteration
        var opts = $.extend({}, $.fn.memory.defaults, options);
        
        var field = $(this);
        
        field.css("width", "850px");
        field.css("height", "850px");
        field.css("position", "relative");
        
        buildgrid(opts, field);
        
       $(this).bind("click.thumb", function(){
           $.fn.memory.format(opts.cancel);
       });
       
       

     };
     
     
     //PRIVATE FUNCTIONS
     
     
     var firstTile = null;
     var secondTile = null;
     var toFind;
     
     var buildgrid = function(opts, field){
         var blocksize = 100;
         var margin = 2;
         var i = opts.tilesRows;
         var j = opts.tilesCols;
         toFind = (i*j)/2;
         //ajax to load json
         $.ajax({
            url: opts.dataprovider,
            type: "POST",
            data: {width: i, height: j},
            dataType: "json",
            success: function(data) {
                
                var counter = 0;
                var col = 0;
                var row = 0;
                $.each(data.memory.tiles, function(i, item){
                    
                   $("<div class='memorydeck'  style='display=block; width:" + blocksize + "px; height:" + blocksize + "px; background-color: black; position:absolute; left: " + col*(blocksize+margin) + "px; top: " + row*(blocksize+margin) + "px'></div>").appendTo(field);
                   $("<div class='memorytile'  style='display=block; width:" + blocksize + "px; height:" + blocksize + "px; display:none; position:absolute; left: " + col*(blocksize+margin) + "px; top: " + row*(blocksize+margin) + "px'><img src='"+ item.url +"' style='width:100px; height:100px' /></div>").appendTo(field);
                   counter++;
                    if(counter%j == 0){
                        row++;
                        col = 0;
                    }else {
                        col++;
                    }
                });
                
                

                //attach memory deck listener
                $(".memorydeck").each( function(){ 
                    $(this).bind("click", function (e) {
                        
                        var clickedDeck = e.currentTarget;
                        var tileToShow = $(e.currentTarget).next();
                        
                        
                        if(!turnedTwo()){
                            $(clickedDeck).css("display", "none");
                            $(tileToShow).css("display", "block");
                        
                            setTile(tileToShow);
                            
                            if(turnedTwo()){
                                var o = firstTile.children(0);
                                
                                if(firstTile.children(0).attr("src") ==  secondTile.children(0).attr("src")){
                                    firstTile = null;
                                    secondTile = null;     
                                    toFind = toFind - 1;
                                    if(solved()){
                                        alert("ok");
                                    }
                                } else {
                                    
                                    setTimeout(function () {
                                        $(firstTile).css("display", "none").delay(1000);
                                        $(firstTile).prev().css("display", "block").delay(1000);

                                        $(secondTile).css("display", "none").delay(1000);
                                        $(secondTile).prev().css("display", "block").delay(1000);

                                        firstTile = null;
                                        secondTile = null;         
                                    }, 1000);
                                    
                                    
                                }
                               
                            }
                        } 
                        
                    })
                });

            },
            error: function(e){
                alert("error: " + e);
            }
        });

         
         
        
        
     };
     
     var setTile = function (t) {
         if(firstTile == null){
             firstTile = t;
         }else if(secondTile == null){
             secondTile = t;
         }
     };
     
     var turnedTwo = function(){
       return (firstTile != null && secondTile != null)  ;
     };
     
     var solved = function() {
         return toFind == 0;
     }
     
     //PULIC FUNCTIONS
     $.fn.memory.format = function(txt) {
        //alert(txt);
     };
     
     
     // DEFAULTS
     $.fn.memory.defaults = {
		tilesRows:	4,
        tilesCols: 4,
        dataprovider: "memory_dynamic.php"
     };
    
})(jQuery);
